<template>
	<view class="index">
		<view class="header flexc flexjb">
			<view class="title">
				{{PersonalInformation.evaluation}}
			</view>
			<view class="info flexr">
				<image src="../../static/image/tini/avator.png" mode="scaleToFill"></image>
				<view class="flex-1 ml30">
					<view class="name">姓名：{{PersonalInformation.name}}</view>
					<view class="name">电话：{{PersonalInformation.phone}}</view>
				</view>
			</view>
		</view>

		<!-- <view class="body flexr flexjb flex-w over-auto" v-for="(item,index) in proData" :key="item.id"> -->
		<!-- <view class="body flexr flexjb flex-w over-auto">
			<block v-for="(item,index) in list" :key="index">
				<view class="wrap" @click="goProject(item)">
					<image src="../../static/image/tini/banner.png" @click="" mode="widthFix">
					</image>
					<view class="project flexc flexja">
						{{item.project}}
						<view class="text">（{{item.type}}）</view> -->
			<!-- 		</view>
				
				</view>
			</block>
			
		</view> -->
		
		<view class="project-wrap flexr flexjb flex-w over-auto">
			<block v-for="(item,index) in list" :key="index">
			<view class="project-box" @click="goProject(item)">
				<image src="../../static/image/tini/banner.png" mode="widthFix">
				<view class="project-t flex-c-c">
					{{item.project}}
				</view>
			</view>
			</block>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				PersonalInformation: this.$store.state.PersonalInformation,
				projectList: this.$store.state.projectList,
				list: []
			}
		},
		computed:{
			projectListFormat(){
				this.projectList.forEach(item=>{
					item.forEach((val,index)=> {
						if(index==2) this.list.push(val)
					});
				})
				console.log(this.projectList,this.list)
				return this.list
			}
		},
		methods: {
			goProject(val){
				uni.navigateTo({
					url:'/pages/introduction/introduction?val='+JSON.stringify(val)
				})
			},
			btn(k) {
				switch (k) {
					case 3:
						this.setContent('bao01271');
						break;
					case 4:
						uni.makePhoneCall({
							phoneNumber: '17395046959' //仅为示例
						});
						break;
					case 5:
						this.setContent('z_070297@163.com');
						break;
					default:
						break;
				}
			},
			setContent(data) {
				// #ifdef H5
				uni.showToast({
					"title": '不支持此功能'
				})
				// #endif
				uni.setClipboardData({
					data: data,
					success: res => {
						uni.showToast({
							"title": '复制成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.index {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c70ecd7-b6b9-48c5-a42e-961fa3dcf6d4/ce66638e-0784-4dd9-aa3c-4421261bcc02.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		
		.header {
			width: 100%;
			height: 30.6%;
			box-sizing: border-box;
			padding: 40rpx 50rpx;

			.title {
				font-family: PingFangSC-Semibold;
				font-weight: 600;
				font-size: 36upx;
				color: #FFFFFF;
				letter-spacing: 1upx;
			}

			.info {
				width: 100%;
				height: 120upx;

				&>image {
					display: block;
					width: 120upx;
					height: 120upx;
				}

				.name {
					height: 60upx;
					line-height: 60upx;
					font-family: PingFangSC-Semibold;
					font-weight: 500;
					font-size: 30upx;
					color: #FFFFFF;
				}

				.ml30 {
					margin-left: 60upx;
				}
			}

		}
		.project-wrap{
			width: 100%;
			height: 847rpx;
			margin-top: 10upx;
			box-sizing: border-box;
			padding: 40upx 60upx 0upx;
			.project-box{
				position: relative;
				width: 280upx;
				height: 240upx;
				margin-bottom: 60upx;
				&>image {
					position: absolute;
					// display: block;
					width: 100%;
					height: 100%;
				}
				.project-t{
					position: relative;
					z-index: 1;
					width: 100%;
					height: 100%;
					text-align: center;
					box-sizing: border-box;
					padding: 40rpx;
					font-weight: 500;
					font-size: 32upx;
					color: #FFFFFF;
					 overflow: hidden;
					text-overflow: ellipsis;
					
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
			}
		}
		.body {
			width: 100%;
			height: 847rpx;
			margin-top: 10upx;
			box-sizing: border-box;
			padding: 40upx 60upx 0upx;

			.wrap {
				position: relative;
				width: 280upx;
				height: 240upx;
				margin-bottom: 60upx;

				&>image {
					// display: block;
					width: 100%;
					height: 100%;
				}

				.project {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					width: 200upx;
					height: 160upx;
					padding: 40upx 40upx 40upx 20upx;
					text-align: center;
					font-family: PingFangSC-Semibold;
					font-weight: 500;
					font-size: 32upx;
					color: #FFFFFF;
					line-height: 44rpx;
					margin-top: 40rpx;
					 overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  -webkit-box-orient: vertical;
				}
			}

		}

	}
</style>
